<div class="home-container full-screen noshrink" fxLayout="row" fxLayoutAlign="space-around">
    <div class="wait-container noshrink">
        <p class="title text-l noshrink" fxLayoutAlign="start center">待传菜</p>
        <div class="wait-list">
            <p *ngIf="!orderList || orderList.length == 0" class="text-dark" fxLayoutAlign="center start">没有待传菜</p>
            <y-scrollable-container id="J_orderList" (change)="pagingMessageChange($event)">
                <deliver-list item *ngFor="let order of orderList;trackBy:trackBy" [attr.data-id]="order.id" [attr.data-seriaNo]="order.serialNo" [order]="order" [className]="order.timeoutClass" [showModel]="false">
                </deliver-list>
            </y-scrollable-container>
            <div class="page-container" fxLayout="row" *ngIf="previousCount || nextCount">
                <span fxFlex="50%" fxLayoutAlign="center center" (click)="pagingInfo.turningPage(-1)">
                    <i class="material-icons">keyboard_arrow_up</i>
                    <span class="count" fxLayoutAlign="center center" *ngIf="previousCount">{{previousCount}}</span>
                </span>
                <span fxFlex="50%" fxLayoutAlign="center center" (click)="pagingInfo.turningPage(1)">
                    <i class="material-icons">keyboard_arrow_down</i>
                    <span class="count" fxLayoutAlign="center center" *ngIf="nextCount">{{nextCount}}</span>
                </span>
            </div>
        </div>
    </div>
    <div class="delivery-container noshrink" fxLayout="column">
        <p class="title text-l noshrink" fxLayoutAlign="start center">传菜员（{{employeeList && employeeList.length ? employeeList.length : 0}}人）</p>
        <p *ngIf="!employeeList || employeeList.length == 0" class="text-dark" fxLayoutAlign="center center">没有传菜员</p>
        <ul  style="opacity: 0;" class="delivery-list" fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start">
            <li *ngFor="let employee of employeeList;trackBy:trackBy" fxLayoutAlign="center center" [ngStyle]="{'width':liWidth}">
                <deliver [employee]="employee" [attr.data-braceletNo]="employee.extended&&employee.extended.braceletNo" (click)="chooseDeliver(employee)" [deliverStyle]="deliverStyle"></deliver>
            </li>
        </ul>
    </div>
    <div class="ope-container noshrink" id="J_matched" layout=column>
        <div id="J_matchedOrder " [hidden]="!(multipleOrders$ | async)" class="delivery-detail" style="height: 50%;position: relative;" >
            <y-scrollable-container id="J_orderList" (change)="ordersPagingMessageChange($event)">
                <div item class="order-item" *ngFor="let order of (selectOrders$ | async);trackBy:trackBy">
                    <span class="serial">{{order.serialNo}}</span>
                    <span class="qty">{{order.qty+"菜"}}</span>
                    <span class="icon-clear" (click)="chooseDish(order)"><i class="material-icons text-xl">clear</i></span>
                </div>
            </y-scrollable-container>         
            <div class="page-container" fxLayout="row" *ngIf="ordersPagingInfo.previousCount || ordersPagingInfo.nextCount">
                <span fxFlex="50%" fxLayoutAlign="center center" (click)="ordersPagingInfo.turningPage(-1)">
                    <i class="material-icons">keyboard_arrow_up</i>
                </span>
                <span fxFlex="50%" fxLayoutAlign="center center" (click)="ordersPagingInfo.turningPage(1)">
                    <i class="material-icons">keyboard_arrow_down</i>
                </span>
            </div> 
        </div>
        <div id="J_matchedOrder"  [hidden]="(multipleOrders$ | async)" class="delivery-detail padding-s" fxLayout="column" style="justify-content: space-between;height: 30%;">
            <span class="text-large text-orange">{{choosedOrders[0]&&choosedOrders[0].serialNo}}</span>
            <span class="text-xxxl margin-b-s">{{choosedOrders[0]&&(choosedOrders[0].qty + "菜")}}</span>
            <span class="icon-clear-single" *ngIf="choosedOrders[0]&&choosedOrders[0].serialNo&&choosedOrders[0].qty" (click)="chooseDish(choosedOrders[0])"><i class="material-icons text-xl">clear</i></span>
        </div>      
        <div flex layout=column>
            <div id="J_matchedEmployee" flex class="delivery-name margin-t-xs text-large padding-s" fxLayoutAlign="center center"></div>
            <button id="J_delivery" flex class="J_deliverySuccessed btn-certain margin-t-xs text-large padding-s" (click)="deliverySuccessed || deliverExpeditionOrder()">确认</button>
            <button style="display:none;" flex class="J_deliverySuccessed btn-certain-success margin-t-xs padding-s"><div><i class="material-icons text-large">check_circle</i></div><span class="margin-t-m text-xxxl">传菜成功</span></button>
        </div>
    </div>
</div>